import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
// 引入 nprogress
import NProgress from "nprogress";
// 引入 nprogress 的样式
import "nprogress/nprogress.css";

import Films from "../views/films.vue";
import Cinemas from "../views/cinemas.vue";
import Posts from "../views/posts.vue";
import Center from "../views/center.vue";
import Home from "../views/home.vue";
import NowPlaying from "../views/nowPlaying.vue";
import ComingSoon from "../views/comingSoon.vue";
import Order from "../views/order.vue";
import RedBag from "../views/redbag.vue";
// import Login from "../views/login.vue";

NProgress.configure({
  showSpinner: false, // 不要小圆圈
});

const router = createRouter({
  history: createWebHistory(),
  // history: createWebHashHistory(),

  routes: [
    {
      path: "/login",
      component: () => import("../views/login.vue"),
      // 路由元信息
      //    里面随意配置你后续可能有得到的 key-value
      meta: {
        title: "登录",
      },
    },
    {
      path: "/order",
      component: Order,
      meta: {
        title: "订单",
        needLogin: true,
      },
    },
    {
      path: "/red",
      component: RedBag,
      meta: {
        title: "红包",
        needLogin: true,
      },
    },
    {
      path: "/",
      component: Home,
      meta: {
        title: "首页",
      },
      children: [
        {
          path: "films",
          component: Films,
          meta: {
            title: "电影列表",
          },
          children: [
            {
              path: "nowPlaying",
              component: NowPlaying,
              meta: {
                title: "电影列表-正在热映",
              },
            },
            {
              path: "comingSoon",
              component: ComingSoon,
              meta: {
                title: "电影列表-即将上映",
              },
            },
          ],
        },
        {
          path: "cinemas",
          component: Cinemas,
          meta: {
            title: "影院列表",
          },
          beforeEnter(to, from) {
            // next(false); // 阻止导航
            // next("/login"); // 去到 /login
            // return false; // 阻止导航
            // return "/login";
            if (!window.isLogin) {
              // 没有登录，直接重定向到登录页面
              return {
                path: "/login",
                query: {
                  redirect: to.fullPath,
                },
              };
            }
          },
        },
        {
          path: "posts",
          component: Posts,
          meta: {
            title: "资讯列表",
          },
        },
        {
          path: "center",
          component: Center,
          meta: {
            title: "个人中心",
          },
        },
      ],
    },
  ],
});

// 定义一个需要登录的路由路径的集合
const needLoginPaths = ["/order", "/red"];

// 全局前置
router.beforeEach((to, from, next) => {
  console.log("全局前置", to, from);
  NProgress.start();
  // if (needLoginPaths.includes(to.path)) {
  if (to.meta.needLogin) {
    if (window.isLogin) {
      // 登录了，放行
      next();
    } else {
      // 没有登录，重定向到 登录页面
      // next("/login");

      // 重定向到登录页面的时候，携带过去当前的路径参数
      next({
        path: "/login",
        query: {
          // redirect: to.path,
          redirect: to.fullPath,
        },
      });
    }
  } else {
    next();
  }
});

// 全局后置
//   1. 没有 next 参数，
router.afterEach((to, from) => {
  NProgress.done();

  document.title = to.meta.title;
  console.log("全局后置", to);
});

export default router;
